<template>
  <div>
    <template>
      <el-button
        plain
        @click="open1">
        可自动关闭
      </el-button>
      <el-button
        plain
        @click="open2">
      </el-button>
    </template>
    <div class="table-wrapper">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="书名">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="data" label="借书日期">
          <template slot-scope="scope">
            <span>{{ scope.row.data }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="days" label="已借时间">
          <template slot-scope="scope">
            <span>{{ scope.row.days }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fine" label="需交罚款">
          <template slot-scope="scope">
            <span>{{ scope.row.fine }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="185px">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row, scope)" :disabled="!(scope.row.fine!='0')">缴款</el-button>
            <el-popover placement="top-start" title="提示" width="200" trigger="hover" content="如有未缴罚款，请先缴纳罚款再归还图书">
              <el-button type="warning" @click="save(scope.row)" slot="reference">归还</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "User-admin",
  data() {
    return {
      tableData: [{
        name: '爱神的箭感到',
        data: '2001-10-10',
        days: '10',
        fine: '0',
        iseditor: false
      }, {
        name: '啊实打实的',
        data: '2001-10-10',
        days: '100',
        fine: '100',
        iseditor: false
      }],
      search: '',
      visible: false
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    edit(row, index) {
      row.iseditor = true;
    },
    save(row, index) {
      row.iseditor = false;
    },
    delete(row, index) {
      row.iseditor = true;
    },
  }
}
</script>

<style scoped>
.table-wrapper {
  margin: 10% auto;
}

.table-wrapper /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

.table-wrapper /deep/ tr, .table-wrapper /deep/ th, .table-wrapper /deep/ td {
  background: #1439391c !important;
  color: #fff;
  border-bottom: 0px;
}

.table-wrapper /deep/ .el-table tbody tr:hover > td {
  background-color: #367f7f78 !important
}

.table-wrapper /deep/ .el-table__row {
  background: #1439391c !important;
  color: #46d4ff;
}
</style>
